<template>
  <div>
    <el-card class="box-card">
      <div class="text item">
        <el-row type="flex" justify="space-around">
          <el-col :span="7">
            <div class="left">
              <div class="head">
                <div class="head-a">
                  <img class="img" src="@/assets/myicon.jpg" alt="" style="width:100px;height:100px;border-radius:50%;">
                  <div class="name">admin</div>
                </div>
                <div class="text"> <i class="el-icon-collection-tag" /> 交互专家 </div>
                <div class="text"> <i class="el-icon-s-check" /> 不凡学院－某某某事业群－某某平台部－某某技术部－UED </div>
                <div class="text"> <i class="el-icon-location-information" /> 河南省 郑州市 金水区 绿地新都会 </div>
              </div>
              <div class="tag">
                <div class="top">标签</div>
                <div class="content">
                  <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    size="medium"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  />
                  <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New</el-button>
                </div>
              </div>
              <div class="bottom">
                <div class="group">
                  <div v-for="(item,index) in groupList" :key="index" class="items">
                    <img src="https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20201120152029983801.jpg" class="img" alt=""> {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="right">
              <el-tabs v-model="activeName">
                <el-tab-pane label="用户管理" name="first">
                  <div class="list-item">
                    <div v-for="(item1,index) in article" :key="index" class="items">
                      <div class="title">{{ item1.title }}</div>
                      <el-tag v-for="(key,index) in item1.tagLsit" :key="index" class="articleTag" size="mini">{{ key }}</el-tag>
                      <div class="text">{{ item1.text }}</div>
                      <div class="name-time">
                        <span class="name">{{ item1.name }}</span>
                        <span class="time">{{ item1.time }}</span>
                      </div>
                      <div class="footer">
                        <span><i class="el-icon-s-flag" />125</span>
                        <span class="line">|</span>
                        <span><i class="el-icon-thumb" /> 13453</span>
                        <span class="line">|</span>
                        <span> <i class="el-icon-chat-line-round" /> 222</span>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">
                  <div class="card-list">
                    <el-card v-for="(item2,index) in grouplist " :key="index" class="card">
                      <img class="bigImg" :src="item2.img">
                      <div class="title">{{ item2.name }}</div>
                      <div class="text">{{ item2.main }}</div>
                      <div class="bottom">
                        <div class="time">{{ item2.time }}天前</div>
                        <div class="images">
                          <div class="img-group">
                            <img v-for="(val,index) in item2.imgGroup" :key="index" class="img-items" :src="val">
                          </div>
                        </div>

                      </div>
                    </el-card>
                  </div>

                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
  </div>
</template>
<script>
import mixin from '../mixins/index'
export default {
  mixins: [mixin],
  data() {
    return {
      dynamicTags: ['学霸', '随便', '专业设计', '打工人', '高能君'],
      inputVisible: false,
      inputValue: '',
      groupList: ['不凡UI设计组', '不凡前端开发组', '阿里开发组', 'VUE小组', '高逼格天团', 'GAMEPLAY组'],
      activeName: 'first'
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }

}
</script>
<style lang="scss" scoped>
  .box-card{
    width: 100%;
    margin: 30px;

    .left{
      padding: 10px;
      border: 1px solid #ebeef5;
      .head{
        border-bottom: 1px dashed rgba(0,0,0,.06);
        .head-a{
          text-align: center;
          padding-top: 20px;
          margin-bottom: 10px;
          .name{
            font-size: 20px;
            margin-top: 10px;
          }
        }
        .text{
          font-size: 13px;
          margin-top: 10px;
        }
      }
      .tag{
        padding: 20px 0;
        .top{
          padding: 10px 0;
        }
          .el-tag + .el-tag {
            margin-left: 10px;
            margin-top: 8px;
          }
          .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
          }
          .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
          }
      }
      .bottom{
       .group{
           display: flex;
          flex-wrap: wrap;
          .items{
            width: 45%;
            height: 30px;
            font-size: 16px;
            margin-bottom: 20px;
            .img{
              width: 25px;
              height: 25px;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
        }
      }
    }
    .right{
      margin-left: 10px;
      padding-left: 10px;
      border: 1px solid #ebeef5;
      .items{
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed grey;
        .tilte{
          margin-bottom: 10px;
          font-size: 16px;
        }
        .articleTag{
          margin-left: 5px;
          margin-bottom: 10px;
          margin-top: 10px;
        }
        .text{
          font-size: 14px;
          margin-bottom: 10px;
        }
        .name-time{
          display: flex;
          justify-content: flex-end;
          font-size: 13px;
          margin-top: 15px;
          margin-bottom: 10px;
          color: rgba(0,0,0,.45);
          .name{
            margin-right: 20px;
          }
        }
        .footer{
          font-size: 14px;
          color: rgba(0,0,0,.45);
          .line{
            margin: 0 10px;
          }
        }
      }
        ::v-deep .el-card__body{
          padding: 0px 0px 10px 10px;
        }
      .card-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .card{
          width: 23%;
          height: 260px;
          margin-bottom: 10px;
          .bigImg{
            width: 100%;
            height: 150px;
          }
          .title{
            margin-left: 5px;
          }
          .text{
            font-size: 12px;
            margin: 4px;
          }
          .bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            .time{
              font-size: 12px;
              color: gray;
              margin-left: 5px;
            }
            .images{
              margin-right: 5px;
              .img-group{
              width: 70px;
              height: 25px;
              position: relative;
              display: flex;
              justify-content: flex-end;
              .img-items{
                width: 20px;
                height: 20px;
                position: relative;
                margin-left: -10px;
              }
            }
            }

          }
        }
      }

    }
  }
</style>
